﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    {#<meta http-equiv="refresh" content="60;url='http://mtw.so/5FRdFE'">#}

    <title>岗位数据大屏面板</title>
    <script type="text/javascript" src="/static/data/js/jquery.js"></script>
    <link rel="stylesheet" href="/static/data/css/comon0.css">
    <style>
        .content-header{
            padding: 0px 15px 0 15px;
        }
    </style>
    {#    <script src="/static/data/js/js.js"></script>#}
</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="/static/data/images/loading.gif"> 数据计算中...</div>
</div>
<div class="head">
    <h1><a href="#">岗位数据大屏面板</a></h1>
{#    <div class="time" id="showTime">2019/12/05 16:16:54</div>#}
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y + "/" + Appendzero(mt) + "/" + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s) + "";

            function Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            }

            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    </script>

</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>

            <div class="boxall" style="height: calc(58% - .15rem)">
                <div class="alltitle">最新入录数据（岗位 - 工资比例 - 工资）</div>
                <div class=" boxnav " id="echarts4">
                </div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">省份分布图</div>
                <div class="boxnav" id="echarts3"></div>
            </div>
        </li>


        <li>
            <div class="boxall" style="height: calc(20% - .15rem)">
                <ul class="row h100 clearfix" id="app">
                    <li class="col-12">
                        <div class="sqzs h100">
                            <p>当前站点获取岗位数据统计</p>
                            <h1><span>{% verbatim %} {{ player_total }} {% endverbatim %}</span></h1>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="boxall" style="height: calc(38% - .15rem)">
                <div class="alltitle">当前薪资最佳</div>
                <div class="boxnav" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">公司类别数量</div>
                <div class="boxnav" id="echarts2"></div>
            </div>

        </li>
        <li>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">文本分析</div>
                <div class="boxnav" id="echarts6"></div>
            </div>


            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">岗位推荐</div>

                <div class="boxnav" id="recommend">
                    <table border="0" cellspacing="0">
                        <tr>
                            <th>标题</th>
                            <th>操作</th>
                        </tr>

                        <tr v-for="item in recommend_list">
                            <th>{% verbatim %} {{ item.name }} {% endverbatim %}</th>
                            <td><a :href="item.url" target="_blank">跳转查看</a></td>
                        </tr>
                    </table>
                </div>

            </div>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">学历需求统计</div>
                <div class="boxnav" id="echarts5" style="height:calc(100% - .3rem);"></div>
            </div>
        </li>
    </ul>
</div>

<script type="text/javascript" src="/static/data/js/echarts.min.js"></script>
{#<script language="JavaScript" src="/static/data/js/js.js"></script>#}
</body>
</html>
<script src="/static/js/echarts-wordcloud.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            player_total: 0,
        },
        created() {
            this.get_total()
        },
        methods: {

            get_total() {
                axios.get('/api/total', {}).then(response => {

                    this.player_total = response.data.view

                }).catch(error => {
                    console.log(error)
                    alert("请求异常")
                })
            }
        },
    })
</script>
<script>
    new Vue({
        el: '#recommend',
        data: {
            recommend_list: []
        },
        created() {
            this.get_data()
        },
        methods: {

            get_data() {
                axios.get('/api/recommend', {}).then(response => {
                    this.recommend_list = response.data.res_list
                }).catch(error => {
                    console.log(error)
                    alert("请求异常")
                })
            }
        },
    })
</script>
<script>

    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });


    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(function () {
        echarts_1()
        echarts_2()
        echarts_3()
        echarts_4()
        // echarts_5()
        echarts_6()

        function echarts_1() {

            $.ajax({
                url: "/api/echarts1",
                type: 'GET',
                async: false,
                success: function (Response) {

                    var myChart = echarts.init(document.getElementById('echarts1'));
                    var colors = ['#00FFFF', '#02FF67', '#675bba'];

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            top: '30%',
                            right: '5%',
                            left: '10%',
                            bottom: '25%'
                        },

                        xAxis: [{
                            type: 'category',
                            axisLabel: {
                                color: '#fff',
                                interval: 0
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0a3e98'
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#195384',
                                    type: "dotted",
                                }
                            },
                            data: Response.name_list
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: "元",
                                min: 0,
                                position: 'left',
                                nameTextStyle: {
                                    color: "#fff",
                                    fontSize: 11,
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#0a3e98'
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#0a3e98',
                                        type: "dotted",
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: "#fff",
                                    }
                                },
                            }
                        ],

                        series: [{
                            name: '当前价格',
                            type: 'bar',
                            barWidth: 15, //柱子宽度
                            barGap: 0.3, //柱子之间间距
                            itemStyle: {
                                // normal: {
                                //     color: '#00FFFF',
                                //     opacity: 1,
                                // },
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#039EE6'
                                    }, {
                                        offset: 1,
                                        color: '#6F08D9'
                                    }]),
                                    opacity: 1,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    formatter: "{c}",
                                    color: '#00C0FF'
                                }
                            },
                            data: Response.y_list
                            // animationDuration: function (idx) {
                            //     return idx * 1500 + 1000;
                            // }
                        }
                        ]
                    };
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });


                    // 基于准备好的dom，初始化echarts实例
                    var myChart5 = echarts.init(document.getElementById('echarts5'));

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {type: 'shadow'},
                        }, "grid": {
                            "top": "15%",
                            "right": "10%",
                            "bottom": "20",
                            "left": "10%",
                        },
                        legend: {
                            data: ['字段1', '字段2'],
                            right: 'center',
                            top: 0,
                            textStyle: {
                                color: "#fff"
                            },
                            itemWidth: 12,
                            itemHeight: 10,
                        },
                        "xAxis": [
                            {
                                "type": "category",

                                data: Response.name_5list,
                                axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                                axisLabel: {
                                    textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                                },

                            },
                        ],
                        "yAxis": [
                            {
                                "type": "value",
                                "name": "单位1",
                                splitLine: {show: false},
                                axisTick: {show: false},
                                "axisLabel": {
                                    "show": true,
                                    color: "rgba(255,255,255,.6)"

                                },
                                axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色

                            },
                            {
                                "type": "value",
                                "name": "单位2",
                                "show": true,
                                axisTick: {show: false},
                                "axisLabel": {
                                    "show": true,
                                    formatter: "{value} %",
                                    color: "rgba(255,255,255,.6)"
                                },
                                axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
                                splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                            },
                        ],
                        "series": [

                            {
                                "name": "数量",
                                "type": "bar",
                                "data":  Response.y_5list,
                                "barWidth": "20%",

                                "itemStyle": {
                                    "normal": {
                                        barBorderRadius: 15,
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: '#fccb05'
                                        }, {
                                            offset: 1,
                                            color: '#f5804d'
                                        }]),
                                    }
                                },
                                "barGap": "0"
                            },
                            {
                                "name": "用户数",
                                "type": "line",
                                "yAxisIndex": 1,

                                "data": Response.y_5list,
                                lineStyle: {
                                    normal: {
                                        width: 2
                                    },
                                },
                                "itemStyle": {
                                    "normal": {
                                        "color": "#ff3300",

                                    }
                                },
                                "smooth": true
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart5.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart5.resize();
                    });

                }
            });

        }


        function echarts_2() {

            $.ajax({
                url: "/api/echarts2",
                type: 'GET',
                async: false,
                success: function (Response) {

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('echarts2'));

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {type: 'shadow'},
                            // formatter:'{c}' ,
                        },
                        grid: {
                            left: '0',
                            top: '30',
                            right: '10',
                            bottom: '-20',
                            containLabel: true
                        },
                        legend: {
                            data: [''],
                            right: 'center',
                            top: 0,
                            textStyle: {
                                color: "#fff"
                            },
                            itemWidth: 12,
                            itemHeight: 10,
                            // itemGap: 35
                        },

                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                rotate: -90,
                                textStyle: {
                                    color: "rgba(255,255,255,.6)",
                                    fontSize: 14,

                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,.1)'
                                }

                            },

                            data: Response.time_list

                        }, {

                            axisPointer: {show: false},
                            axisLine: {show: false},
                            position: 'bottom',
                            offset: 20,


                        }],

                        yAxis: [{
                            type: 'value',
                            axisTick: {show: false},
                            // splitNumber: 6,
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,.1)'
                                }
                            },
                            axisLabel: {
                                formatter: "{value} %",
                                textStyle: {
                                    color: "rgba(255,255,255,.6)",
                                    fontSize: 14,
                                },
                            },

                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255,255,255,.1)'
                                }
                            }
                        }],
                        series: [
                            {
                                name: '数量',
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 5,
                                showSymbol: false,
                                lineStyle: {
                                    normal: {
                                        color: 'rgb(222,18,217)',
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(228, 228, 126, .2)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(228, 228, 126, 0)'
                                        }], false),
                                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(228, 228, 126, 1)',
                                        borderColor: 'rgba(228, 228, 126, .1)',
                                        borderWidth: 12
                                    }
                                },
                                data: Response.xa_list

                            },
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });

                }
            });


        }


        function echarts_3() {

            $.ajax({
                url: "/api/echarts3",
                type: 'GET',
                async: false,
                success: function (Response) {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('echarts3'));
                    option = {

                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            top: '30%',
                            right: '3%',
                            left: '4%',
                            bottom: '25%'
                        },
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                start: 0,
                                end: 50
                            },
                            {
                                type: 'inside',
                                realtime: true,
                                start: 0,
                                end: 50
                            }
                        ],
                        xAxis: [{
                            type: 'category',
                            axisLabel: {
                                color: '#fff',
                                interval: 0
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#0a3e98'
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#195384',
                                    type: "dotted",
                                }
                            },
                            data: Response.x_list,
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: "条",
                                min: 0,
                                position: 'left',
                                nameTextStyle: {
                                    color: "#fff",
                                    fontSize: 16,
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#0a3e98'
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#0a3e98',
                                        type: "dotted",
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: "#fff",
                                    }
                                },
                            }
                        ],

                        series: [{
                            name: '省份',
                            type: 'bar',
                            barWidth: 20, //柱子宽度
                            barGap: 0.1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                                        offset: 0,
                                        color: "#d0b415"
                                    },
                                        {
                                            offset: 1,
                                            color: "#425052"
                                        }
                                    ]),
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    formatter: "{c}",
                                    color: '#fff'
                                }
                            },
                            data: Response.y_list,
                            // animationDuration: function (idx) {
                            //     return idx * 1500 + 1000;
                            // }
                        }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });


                }
            });


        }


        function echarts_4() {

            // 取数据
        // 取数据
        $.ajax({
            url: "/api/echarts4",
            type: 'GET',
            async: false,
            success: function (Response) {

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echarts4'));
                var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
                option = {

                    grid: {
                        left: '2%',
                        top: '1%',
                        right: '5%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: [{
                        show: false,
                    }],
                    yAxis: [{
                        axisTick: 'none',
                        axisLine: 'none',
                        offset: '7',
                        axisLabel: {
                            textStyle: {
                                color: 'rgba(255,255,255,.6)',
                                fontSize: '14',
                            }
                        },
                        data: Response.x_list

                    }, {
                        axisTick: 'none',
                        axisLine: 'none',
                        axisLabel: {
                            textStyle: {
                                color: 'rgba(255,255,255,.6)',
                                fontSize: '14',
                            }
                        },
                        data: Response.y_list

                    }, {
                        name: '单位：件',
                        nameGap: '50',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize: '16',
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        data: [],
                    }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: Response.bl_list,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: function (param) {
                                    return param.value + '%';
                                },
                                textStyle: {
                                    color: 'rgba(255,255,255,.8)',
                                    fontSize: '12',
                                }
                            }
                        },
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#03c893'
                                },
                                    {
                                        offset: 1,
                                        color: '#0091ff'
                                    }
                                ]),
                                barBorderRadius: 15,
                            }
                        },
                        z: 2
                    }, {
                        name: '白框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.2)',
                                barBorderRadius: 15,
                            }
                        },
                        z: 1
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });

            }
        });


        }


        function echarts_6() {

            $.ajax({
                url: "/api/ciyun",
                type: 'GET',
                async: false,
                success: function (Response) {

                    var myChart = echarts.init(document.getElementById("echarts6"));
                    JosnList = Response.res_list;
                    option = {
                        tooltip: {
                            show: true,
                        },
                        series: [
                            {
                                type: 'wordCloud',
                                //size: ['9%', '99%'],
                                sizeRange: [14, 50],
                                //textRotation: [0, 45, 90, -45],
                                rotationRange: [-45, 90],
                                shape: 'circle',
                                textPadding: 0,
                                width: '80%',
                                // 画布高
                                height: '80%',
                                autoSize: {
                                    enable: true,
                                    minSize: 6,
                                },
                                textStyle: {
                                    normal: {
                                        color: function () {
                                            return (
                                                'rgb(' +
                                                [Math.round(Math.random() * 256), Math.round(Math.random() * 256), Math.round(Math.random() * 256)].join(
                                                    ','
                                                ) +
                                                ')'
                                            );
                                        },
                                    },
                                    emphasis: {
                                        shadowBlur: 2,
                                        shadowColor: '#333',
                                    },
                                },
                                data: JosnList,
                            },
                        ],
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });

                }
            });


        }


    })


</script>